import React, {createRef} from 'react';
import styles from './index.module.scss';
import ChartContainer from "@/pages/dv/DvShow/ReadChartContainer";
import {ResizeBox} from "@/components";

// const dvContainerRef: Ref<any> = createRef();

interface IProps {
  uuid: string;
  adapterMode: string;
  option: DV.IOption;
}

/**
 * 大屏展示组件
 * @param uuid
 * @param adapterMode
 * @param option
 * @param props
 * @constructor
 */

class DvShow extends React.Component<IProps>{
  private prevWidth: number;
  private prevHeight: number;
  private dvContainerRef: any;
  constructor(props: IProps) {
    super(props);
    this.prevWidth = 0;
    this.prevHeight = 0;
    this.dvContainerRef = createRef();
    this.state = {};
  }

  componentWillReceiveProps(nextProps: Readonly<IProps>, nextContext: any): void {
    if(nextProps.adapterMode !== this.props.adapterMode){
      this.changeAdapter(nextProps.adapterMode, this.prevWidth, this.prevHeight)
    }
  }

  shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<{}>, nextContext: any): boolean {
    // 不重新渲染，性能优化
    if(nextProps.adapterMode !== this.props.adapterMode){
      return false;
    }
    return true;
  }

  /**
   * 改变适配方案
   */
  changeAdapter = (mode: string, width: number, height: number) => {
    // 大屏主配置项
    const {charts, bgConfig, ...dvOption} = this.props.option;

    if (!dvOption.width || !dvOption.height || !width || !height) return;

    const xScale = width / dvOption.width;
    const yScale = height / dvOption.height;
    let dvContainerNode: any = this.dvContainerRef.current;    // 内层div---真实宽高

    switch (mode) {
      // 等比缩放，即大屏缩放比例和原始大屏宽高比例一样，完整显示在当前浏览器内
      case 'stretch':
        if (xScale > yScale) {
          dvContainerNode.style.transform = 'scale(' + yScale + ')';
        } else {
          dvContainerNode.style.transform = 'scale(' + xScale + ')';
        }
        break;
      case 'width':
        // 适应宽度
        dvContainerNode.style.transform = 'scale(' + xScale + ')';
        break;
      case 'height':
        // 适应高度
        dvContainerNode.style.transform = 'scale(' + yScale + ')';
        break;
      case 'full':
        // 全屏铺满
        dvContainerNode.style.transform = 'scale(' + xScale + ',' + yScale + ')';
        break;
      case 'normal':
        dvContainerNode.style.transform = 'none';
        break;
      default:
        break;
    }
  }
  render(): React.ReactNode {
    const {adapterMode, option} = this.props;
    const {charts, bgConfig, ...dvOption}  = option;
    return <div className={styles.dv_wrapper}>
      <div className={'dv_container'} ref={this.dvContainerRef} style={{
        width: dvOption.width,
        height: dvOption.height,
        backgroundColor: bgConfig.bgColor,
      }}>
        <div className={'dv_bg'} style={{
          background: `url(${bgConfig.bgUrl}) 0% 0% / 100% 100%`,
          opacity: bgConfig.bgOpacity,
          filter: `blur(${bgConfig.bgBlur}px)`, // 高斯模糊
        }}/>
        <div className={'dv_chart_list'}>
          {
            charts.map((chartOption, index) => <ChartContainer
              key={chartOption.uid ? chartOption.uid : index}
              chartOption={chartOption}
            />)
          }
        </div>
      </div>

      <ResizeBox
        onResize={(width: number, height: number) => {
          this.prevWidth = width;
          this.prevHeight = height;
          this.changeAdapter(adapterMode, width, height);
        }}
      />
    </div>
  }

}

export default DvShow;


